<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>姓名案例——计算属性</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>
        <div class="p">
            姓：<input type="text" v-model="firstName"><br/><br>
            名：<input type="text " v-model="lastName"><br><br>
            测试全名：<input type="text" v-model="x"><br><br>
            全名：<span>{{fulName}}</span><br><br>
            全名：<span>{{fulName}}</span><br><br>
            全名：<span>{{fulName}}</span><br><br>
        </div>
        <!--计算属性：
        1.需要的属性不存在，要通过已有的‘属性’计算出来
        2.原理：底层借助Object.defineproperty方法提供的getter和setter
        3.优点：与methods相比，内部存在缓存机制（复用），效率更高，调试更加方便
        4.计算属性最终会出现在vm里，直接按照属性去读取即可
        5.如果计算属性要被修改，那必须要写set函数去相应修改，且set中要去引起计算时依赖的数据发生变化

        -->

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                data() {
                    return {
                        firstName: '张',
                        lastName: '三',
                        x: 'hello'
                    }
                },
                computed: {
                    fulName: {  //计算属性:是对象但是按属性调用
                        //get,当有人读取fulname的时候，get就会自动被调用，且返回值作为fulname的值
                        //get什么时候调用？（有缓存存在）1.初次读取fulname的时候 2.所依赖的数据发生变化的时候
                        get() {
                            console.log('get被调用了')
                            //此处的this是vm
                            return this.firstName + '-' + this.lastName;
                        },
                        //set什么时候调用？当fulname被修改的时候
                        set(v) {
                            console.log('set被调用', v);
                            const arr = v.split('-')
                            this.firstName = arr[0];
                            this.lastName = arr[1];

                        }
                    }
                    //注意：如果只需要使用get，可以使用简写方式,即写成一个函数形式，但是仍然以属性方式调用
         /*           fulName(){
                        console.log('get被调用了')
                        //此处的this是vm
                        return this.firstName + '-' + this.lastName;
                    }*/
                }
            })
            vm.$mount(".p");
        </script>
    </body>
</html>